/**
 * 性能优化点事项说明
 */

import { CSSProperties } from "react";
//import s from './index.module.less'

interface Props {
  className?: string;
  style?: CSSProperties;
  [key: string]: any;
}

const list: [string, string][] = [
  ["输入搜索过滤做防抖处理", "避免高频执行过滤逻辑，导致页面频繁渲染"],
  [
    "TodoItem优化",
    "TodoItem的输入框采用受控组件方式，监听onBlur事件再触发state更改，而不是通过频繁触发onInput引起更改",
  ],
  ["分页处理", "滚动触底加载下一页或底部添加分页控件实现"],
  [
    "虚拟列表",
    "只渲染指定视口内的可见部分，其余部分以虚拟（内存）的形式保存，等待滚动到底部时再渲染",
  ],
];
export default ({ className = "", children, ...restProps }: Props) => {
  return (
    <div className={`${className} f-fs-s-c`} {...restProps}>
      <h1 className="mb-16 f-0">附加要求：优化页面渲染性能</h1>
      <ul
        className="f-1 hover-show-scroll"
        style={{ overflow: "auto", flexBasis: "1px" }}
      >
        {list.map(([key, val]: [string, string], ind: number) => {
          return (
            <li className="mb-4" key={ind}>
              {ind + 1}、<span>{key}</span>：
              <span style={{ color: "#aaa" }}>{val}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
};
